<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>我的关注</title>
<link rel="stylesheet" href="../css/layui.css">
<link rel="stylesheet" href="../css/modal_l.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">

<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<script type="text/javascript" src="../layui/layui.js"></script>
<!-- 网页字体库 -->
<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext"rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/layui.all.js"></script>
<script type="text/javascript">
	//假设当前用户id为1
	var currentUid = 1;
	//var currentUid = [[${session.uid}]];
	$(document).ready(function(){
		//选中获取
		var modal;
		var modal2;
		var follower;
		//获取全部
		allFollowed(currentUid);
		allFans(currentUid);

		//alert(currentUid);
	});
	//全部用户关注的人--关注
	function allFollowed(element){
		var options = {
    			url: "/user/allFollowed",
    			method: 'post',
    			data:{
    				"currentUid":element
			    },
			    success: function (data) {
			    	console.info(data);
			    	var po1 = "";
			    	for (var i = 0; i < data.length; i++) {
			    		po1 += '<tr onclick=getThisRow(this)>'
			    			+'<td hidden>'+data[i].userRole+'</td>'
			    			+'<td hidden>'+data[i].headImage+'</td>'
			    			+'<td hidden>'+data[i].uid+'</td>'
				    		+'<td>'+data[i].nickName+'</td>'
				    		+'<td>'+data[i].uphone+'</td>'
				    		+'<td>'+data[i].umail+'</td>'
				    		+'<td>已关注</td>'
				    		+'</tr>';
					}
			    	$("#allFolloweds").html(po1);
			    }
    	};
    	$.ajax(options);
	}
	//全部关注用户的人--粉丝
	function allFans(element){
		var options = {
    			url: "/user/allFans",
    			method: 'post',
    			data:{
    				"currentUid":element
			    },
			    success: function (data) {
			    	console.info(data);
			    	var po2 = "";
			    	for (var i = 0; i < data.length; i++) {
			    		po2 += '<tr onclick=getThisFans(this)>'
			    			+'<td hidden>'+data[i].userRole+'</td>'
			    			+'<td hidden>'+data[i].headImage+'</td>'
			    			+'<td hidden>'+data[i].uid+'</td>'
				    		+'<td>'+data[i].nickName+'</td>'
				    		+'<td>'+data[i].uphone+'</td>'
				    		+'<td>'+data[i].umail+'</td>'
				    		+'<td>粉丝</td>'
				    		+'</tr>';
					}
			    	$("#allFans").html(po2);
			    }
    	};
    	$.ajax(options);
	}
	//操作选中行
	function getThisRow(element) {
		role = element.children[0].innerHTML;
		follower = element.children[2].innerHTML;
		nickName = element.children[3].innerHTML;
		phone = element.children[4].innerHTML;
		mail = element.children[5].innerHTML;
		//弹窗
		modal = document.getElementById('myModal');
		var span = document.querySelector('.close');
		modal.style.display = "block";
		span.onclick = function() {
		    modal.style.display = "none";
		}
		window.onclick = function(event) {
		    if (event.target == modal) {
		        modal.style.display = "none";
		    }
		}		
		//判断所选行角色
		if (role=='student') {
			roler = "萌新学员";
		}else if (role=='coach') {
			roler = "猛男教练";
		}else if (role=='gym') {
			roler = "瑜伽场馆";
		}else{
			roler = "管理员";
		}
		t = '<tr>'
    		+'<td>'+nickName+'</td>'
    		+'<td>'+phone+'</td>'
    		+'<td>'+mail+'</td>'
    		+'<td>'+roler+'</td>'
    		+'</tr>';		
		$("#thisFollowed").html(t);
	}
	//取消关注--更新关注关系
	function cancle(){
		var options = {
    			url: "/user/cancleFollow",
    			method: 'post',
    			data:{
    				"currentUid":currentUid,
    				"follower":follower
			    },
			    success: function (data) {
			    	console.info(data);
			    	alert(data);
			    	modal.style.display = "none";
			    	//刷新全部
			    	allFollowed(currentUid);
			    	//allFans(currentUid);
			    }
    	};
    	$.ajax(options); 
	}
	
	//操作选中fans
	function getThisFans(element) {
		role2 = element.children[0].innerHTML;
		follower2 = element.children[2].innerHTML;
		nickName2 = element.children[3].innerHTML;
		phone2 = element.children[4].innerHTML;
		mail2 = element.children[5].innerHTML;
		//弹窗
		modal2 = document.getElementById('myModal2');
		var span2 = document.querySelector('.close2');
		modal2.style.display = "block";
		span2.onclick = function() {
		    modal2.style.display = "none";
		}
		window.onclick = function(event) {
		    if (event.target == modal2) {
		        modal2.style.display = "none";
		    }
		}
		//判断所选行角色
		if (role2=='student') {
			roler2 = "普通学员";
		}else if (role2=='coach') {
			roler2 = "猛男教练";
		}else if (role2=='gym') {
			roler2 = "瑜伽场馆";
		}else{
			roler2 = "管理员";
		}
		var relation2 = "";
		var t2 = "";
		//和我的关系
		var options = {
    			url: "/user/judgeRelation",
    			method: 'post',
    			data:{
    				"currentUid":currentUid,
    				"follower":follower2
			    },
			    success: function (data) {
			    	console.info(data);
			    	relation2 = data;
					//画
					t2 = '<tr>'
			    		+'<td>'+nickName2+'</td>'
			    		+'<td>'+phone2+'</td>'
			    		+'<td>'+mail2+'</td>'
			    		+'<td>'+roler2+'</td>'
			    		+'<td>'+relation2+'</td>'
			    		+'</tr>';
					$("#thisFans").html(t2);
			    }
    	};
    	$.ajax(options);
	}
	//新增关注--更新关注关系
	function add_fans(){
		var options = {
    			url: "/user/addFollow",
    			method: 'post',
    			data:{
    				"currentUid":currentUid,
    				"follower":follower2
			    },
			    success: function (data) {
			    	console.info(data);
			    	alert(data);
			    	modal2.style.display = "none";
			    	//刷新全部
			    	allFollowed(currentUid);
			    	allFans(currentUid);
			    }
    	};
    	$.ajax(options); 
	}
	//取消关注--更新关注关系
	function cancle_fans(){
		var options = {
    			url: "/user/cancleFollow",
    			method: 'post',
    			data:{
    				"currentUid":currentUid,
    				"follower":follower2
			    },
			    success: function (data) {
			    	console.info(data);
			    	alert(data);
			    	modal2.style.display = "none";
			    	//刷新全部
			    	allFollowed(currentUid);
			    	allFans(currentUid);
			    }
    	};
    	$.ajax(options); 
	}
</script>
</head>
<body>
<div class="container">

		<!-- 导航栏 -->
		<ul class="layui-nav">
		  <li class="layui-nav-item">
		   <!-- 	<a href="../home.jsp" id="totle">Yoga</a> -->
		   	<a href="../home.jsp" style="font-family: 'Tangerine', cursive;font-size: 100%;color:white;">Yoga</a>
		  </li>
		  <li class="layui-nav-item" style="float: right;">
		    <a href="#" onClick="javascript :history.back(-1);">返回</a>
		  </li>
		</ul>

	<div class="layui-tab layui-tab-card">
		<ul class="layui-tab-title">
		    <li class="layui-this">我的关注</li>
		    <li>关注我的</li>
		</ul>
		<div class="layui-tab-content" style="height: 600px;">
		    <div class="layui-tab-item layui-show">
		    		<table class="layui-table">
					  <colgroup>
					    <col width="20%">
					    <col width="30%">
					    <col width="40%">
					    <col width="10%">
					  </colgroup>
					  <thead>
					    <tr>
					      <th>姓名</th>
					      <th>电话</th>
					      <th>邮箱</th>
					      <th>状态</th>
					    </tr> 
					  </thead>
					  <tbody id="allFolloweds">
					    <!-- 显示内容 -->
					  </tbody>
					</table>
		    </div>
		    <div class="layui-tab-item">
		    	<table class="layui-table">
					  <colgroup>
					    <col width="20%">
					    <col width="30%">
					    <col width="40%">
					    <col width="10%">
					  </colgroup>
					  <thead>
					    <tr>
					      <th>姓名</th>
					      <th>电话</th>
					      <th>邮箱</th>
					      <th>状态</th>
					    </tr> 
					  </thead>
					  <tbody id="allFans">
					  	<!-- 显示内容 -->
					  </tbody>
					</table>
		    </div>
		</div>
	</div>
</div>
	
<!-- 弹窗 -->
<div id="myModal" class="modal" >
	<div class="container">
	  <!-- 弹窗内容 -->
	    <div class="modal-content">
	      <div class="modal-header">
	        <span class="close">&times;</span>
	        <br>
	        <img src="/image/egheadimg.jpg" style="max-width: 70px;">
	        <br>
	      </div>
	      <div class="modal-body">
	      		<br>
	        	<table class="layui-table">
				  <colgroup>
				    <col width="20%">
				    <col width="30%">
				    <col width="40%">
				    <col width="10%">
				  </colgroup>
				  <thead>
				    <tr>
				      <th>姓名</th>
				      <th>电话</th>
				      <th>邮箱</th>
				      <th>角色</th>
				    </tr> 
				  </thead>
				  <tbody id="thisFollowed">
					<!-- 显示内容 -->
				  </tbody>
				</table>
	        	<br>
	      </div>
	      
	      <div class="modal-footer"><br>
	        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="cancle()">取消关注</button>
	      </div>
	      
	    </div>
	</div>
</div>
<!-- 弹窗 2 -->
<div id="myModal2" class="modal" >
	<div class="container">
	  <!-- 弹窗内容 -->
	    <div class="modal-content">
	      <div class="modal-header">
	        <span class="close2">&times;</span>
	        <br>
	        <img src="/image/egheadimg.jpg" style="max-width: 70px;">
	        <br>
	      </div>
	      <div class="modal-body">
	      		<br>
	        	<table class="layui-table">
				  <colgroup>
				    <col width="20%">
				    <col width="30%">
				    <col width="30%">
				    <col width="10%">
				    <col width="10%">
				  </colgroup>
				  <thead>
				    <tr>
				      <th>姓名</th>
				      <th>电话</th>
				      <th>邮箱</th>
				      <th>角色</th>
				      <th>关系</th>
				    </tr> 
				  </thead>
				  <tbody id="thisFans">
					<!-- 显示内容 -->
				  </tbody>
				</table>
	        	<br>
	      </div>
	      <div class="modal-footer"><br>
	        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="add_fans()">关注ta</button>
	        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="cancle_fans()">取消关注</button>
	      </div>
	    </div>
	</div>
</div>

</body>
</html>